<template>
    <el-main>
        <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
                <el-form-item>
                    <el-input v-model="searchModel.username" placeholder="请输入用户账号"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search(pageNo, pageSize)">查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
                    <el-button icon="el-icon-delete" type="danger" size="small" @click="handleDelete()" v-if="hasPermission('sys:loginlog:delete')">批量删除</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="loginList" border stripe style="width: 100%; margin-bottom: 10px" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="username" label="账号" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status == '0'" size="normal">成功</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.status == '1'" size="normal">失败</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="ipaddr" label="登录IP" align="center"></el-table-column>
                <el-table-column prop="os" label="操作系统" align="center"></el-table-column>
                <el-table-column prop="msg" label="详细信息" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="登录时间" align="center"></el-table-column>
            </el-table>
            <el-pagination background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 30, 40, 50]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" align="center">
            </el-pagination>
    </el-main>
</template>
<script>
import {getLoginInfo,deleteLogin} from '@/api/login';
export default {
    data(){
        return {
            searchModel:{
                username:'',
                pageNo:1,
                pageSize:10,
            },
            loginList:[],
                infoId:'',
                username:'',
                status:'',
                ipaddr:'',
                os:'',
                msg:'',
                loginTime:'',
            pageNo: 1, //当前页码
            pageSize: 10, //每页显示数量
            total: 0, //总数量
            selectedIds: [],
        }
    },
    methods:{
        //查询
        async search(pageNo=1,pageSize=10){
            this.searchModel.pageNo = pageNo;//当前页码
            this.searchModel.pageSize = pageSize;//每页显示数量
            let res = await getLoginInfo(this.searchModel);
            //执行成功
            if (res.success) {
            //角色列表
            this.loginList = res.data.records;
            //总数量
            this.total = res.data.total;
            }
        },
        resetValue() {
            this.searchModel.username = '';
            this.search();
        },
        // 删除
        async handleDelete(){
            if (this.selectedIds.length === 0) {
                this.$message.warning("请选择要删除的记录");
                return;
            }
            let confirm =await this.$myconfirm("确定要删除该数据吗?");
            if(confirm){
                const idsParam = this.selectedIds.join(',');
                await deleteLogin({ids:idsParam})
                this.search();
                this.selectedIds = [];
                this.$message.success("删除成功");
            }
            
        },
        /**
        * 当每页数量发生变化时触发该事件
        */
        handleSizeChange(size) {
            this.pageSize = size; //将每页显示的数量交给成员变量
            this.search(this.pageNo, size);
        },
        /**
        * 当页码发生变化时触发该事件
        */
        handleCurrentChange(page) {
            this.pageNo = page;
            //调用查询方法
            this.search(page, this.pageSize);
        },
        handleSelectionChange(selectedRows) {
            this.selectedIds = selectedRows.map(item => item.infoId);
        }
    },
    //初始化时调用
    created() {
        this.search()
    },
};
</script>
<style lang="scss" scoped></style>